<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>请假管理</title>
	<link rel="stylesheet" href="../css/common2.css">
	<link rel="stylesheet" href="/css/popup.css">
	<link rel="stylesheet" href="/scriptZIP/vue-select.min.css">

	<style>
		.search_img {
			position: absolute;
			margin-top: 1px;
			right: 3%;
		}

		td>div {
			white-space: pre-wrap;
			padding-left: 5px;
		}

		.search_img {
			position: absolute;
			right: 3%;
		}

		.other {
			height: 33px;
			border: 1px solid #7a7a7a;
		}


		input {
			padding-left: 5px;
		}

		.reason {
			width: 240px;
			float: left;
			margin-left: 200px;
			margin-top: -40px;
			position: absolute;
			height: 40px;
			font-size: 16px;
			line-height: 40px;
		}

		.import {
			width: 120px;
			height: 35px;
			background: #3fb9e3;
			text-align: center;
			font-size: 18px;
			line-height: 35px;
			color: white;
			border-radius: 12px;
			margin-left: 20px;
			display: inline-block;
		}

		/* .two {
			width: 11%;
		}

		.five {
			width: 13%;
		}

		.four {
			width: 22%;
		}

		.three {
			width: 20%;
		} */

		.hih {
			width: 100px;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}

		.orderXx_popup {
			position: fixed;
			left: 0px;
			top: 0px;
			width: 100%;
			height: 100%;
			z-index: 999999999;
			background-color: rgba(62, 62, 62, 0.5);
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.popup_box {
			color: black;
			width: 400px;
			height: 300px;
			background-color: white;
			border-radius: 12px;
		}

		.popup_box_title {
			height: 50px;
			line-height: 50px;
			font-size: 24px;
			position: relative;
			text-align: center;
			border-bottom: solid 1px #5c5c5c;
		}

		.popup_box_input {
			padding: 60px 0px 0px 37px;
			font-size: 16px;
			height: 120px;
		}

		.popup_box_input input {
			width: 232px;
			line-height: 27px;
			border-bottom: 1px solid #7a7a7a;
		}

		[v-if] {
			display: none;
		}

		.popup_box_btn_box {
			display: flex;
			justify-content: space-around;
		}

		.popup_box_btn {
			padding: 2px 0;
			width: 100px;
			text-align: center;
			color: white;
			border-radius: 4px;
			background-color: #5dbeff;
		}

		.popup_box_btn2 {
			color: #2c2c2c;
			background-color: #b9b9b9;
		}

		.popup_box_content {
			height: 190px;
		}


		.popup_box_check {
			display: flex;
			align-items: center;
			padding: 20px 20px 10px 30px;
			box-sizing: border-box;
			font-size: 16px;
		}

		.popup_box_reject_reason {
			margin-top: 10px;
			padding: 0 30px;
			box-sizing: border-box;
			font-size: 14px;
		}

		.popup_box_reject_reason label {
			display: block;
			font-weight: bold;
			margin-bottom: 5px;
		}

		.popup_box_reject_reason textarea {
			width: 100%;
			height: 60px;
			padding: 8px;
			border: 1px solid #7a7a7a;
			border-radius: 4px;
			resize: none;
			font-size: 14px;
			box-sizing: border-box;
			margin-top: 5px;
		}
	</style>
</head>

<body>
	<div id="vue-root" style="margin-top: 30px;">

		<div class="refresh" onclick="location.reload()">刷新</div>
		<div class="add" v-if="able.add">
			<a href="interactive_leave_item.html" style="color: white">添加请假申请</a>
		</div>
		<input class="other" placeholder="请输入姓名" v-model="search.name" @keyup.enter="getData0"
			style="width: 145px; position: absolute; right: 720px" />
		<select class="classes search" style="position: absolute; right: 560px" v-model="search.courseId">
			<option :value="undefined">请选择课程</option>
			<option v-for="course in courses" :key="course.id" :value="course.id" v-text="course.name"></option>
		</select>
		<select class="search" v-model="search.status" style="position: absolute; right: 410px">
			<option :value="undefined">请选择状态</option>
			<option :value="0">待审核</option>
			<option :value="1">审核已通过
			</option>
			<option :value="2">审核已驳回</option>
		</select>
		<v-select class="search666" v-model="search.people" :options="promoters" label="name" :reduce="staffUser => staffUser.id"
			placeholder="请选择申请人" :filterable="true" :clearable="true" style="position: absolute; right: 260px"
		  ></v-select>
		<!-- <select class="classes search" style="position: absolute; right: 260px" v-model="search.people">
			<option :value="undefined">请选择申请人</option>
			<option v-for="staffUser in promoters" :key="staffUser.id" :value="staffUser.id" v-text="staffUser.name">
			</option>
		</select> -->
		<input placeholder="开始时间" class="other" id="startTime" v-model="search.startTime"
			style="width: 65px; font-size: 12px; position: absolute; right: 170px" />
		<input placeholder="结束时间" class="other" id="endTime" v-model="search.endTime" style="
          width: 80px;
          font-size: 12px;
          position: absolute;
          right: 90px;
          border-left: none;
        " />
		<img src="../image/search.png" height="" width="35" class="search_img" @click="getData0">
		<br>
		<br>

		<div class="table" style="margin-top: -25px;">
			<table class="table_top">
				<thead>
					<tr>
						<th class="two">
							<input type="checkbox" class="check-box" v-model="all">序号
						</th>
						<th class="two">学员姓名</th>
						<th class="two">分配校区</th>
						<th class="two">课程</th>
						<th class="four">申请时间</th>
						<th class="four">请假时间</th>
						<th class="two">申请人</th>
						<th class="two">审批人</th>
						<th class="two">请假理由</th>
						<!-- <th class="two">查看</th> -->
						<th class="two">状态</th>

						<th v-if="able.del">操作</th>
					</tr>
				</thead>
				<tbody id="list">
					<tr v-for="(leave,index) in list" :key="leave.id">
						<td class="two">
							<input type="checkbox" class="check-box" v-model="leave.checked">
							<span v-text="index+1"></span>
						</td>
						<td class="two" v-text="leave.studentName"></td>
						<td class="two" v-text="leave.schoolName"></td>
						<td class="two" v-text="leave.courseNames"></td>
						<td class="four" v-text="leave.applicationTime"></td>
						<td class="four" v-html="format(leave)"></td>
						<!-- <td class="four">{{leave.startTime}}~{{leave.endTime}}</td> -->
						<td class="four" v-text="leave.applicantName"></td>
						<td class="four" v-text="leave.auditorName"></td>
						<td :title="leave.reason" class="four">{{ leave.reason }}</td>
						<!-- <td class="four" v-text="leave.reason"></td> -->

						<!-- <td class="two" v-text="{0:'事假',1:'病假',2:'其它'}[leave.type]"></td> -->
						<td class="two">
							<!-- <template v-if="leave.status==0">
								<button @click="audit(leave.id,true)">通过</button>
								<button @click="audit(leave.id,false)">驳回</button>
							</template> -->
							<!-- <template v-else>{{{1:'已通过',2:'未通过'}[leave.status]}}</template> -->
							<span>{{['待审核','审核已通过','审核已驳回'][leave.status]}}</span>
							<span v-if="leave.status === 2">
								<span style="text-decoration: underline; margin-left: 5px;"
									@click="showAuditReason(leave)">
									查看原因
								</span>
							</span>
						</td>
						<td>
							<div class="option" style="position: relative;" v-if="able.edit">

								<div  v-if="!leave.status||leave.status==2" class="edit-icon option-icon"
									style="left: 10%; top:30%;position: absolute;">
									<a :href="'interactive_leave_item.html?id='+leave.id">
										<img class="img" src="../image/edit.png" height="20" width="20"
											onmouseover="this.src='../image/edit_light.png'"
											onmouseout="this.src='../image/edit.png'" />
									</a>
								</div>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<br>
		<div class="delete" @click="batchDelete" v-if="able.del">批量删除</div>
		<ul class="pagination" v-if="pages>1">
			<li>
				<a v-if="pageNum!=1" @click="pageNum=1">«</a>
				<a class="pages-jump" v-if="pageNum!=1" @click="pageNum--">‹</a>
				<a v-text="pageNum"></a>
				<a class="pages-jump" v-if="pageNum!=pages" @click="pageNum++">›</a>
				<a v-if="pageNum!=pages" @click="pageNum=pages">»</a>
			</li>
		</ul>
		<div style="float: right;">
			总共{{total}}条记录
			<select class="ui-select init" style="height:32px" v-model="pageSize">
				<option :value="10">每页10条</option>
				<option :value="30">每页30条</option>
				<option :value="100">每页100条</option>
			</select>
		</div>

		<div v-if="showReasonPopup" class="orderXx_popup" @click="closeReasonPopup">
			<div class="popup_box" @click.stop>
				<div class="popup_box_title">审核原因</div>
				<div class="popup_box_content" style="padding: 20px; font-size: 16px;">
					{{ selectedAuditReason || '无审核原因' }}
				</div>
				<div class="popup_box_btn_box">
					<div class="orderXx_btn popup_box_btn" @click="closeReasonPopup">关闭</div>
				</div>
			</div>
		</div>

	</div>
	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/scriptZIP/dayjs.min.js"></script>
	<script src="/scriptZIP/vue-select.min.js"></script>
	<script src="/lib/laydate/laydate.js"></script>
	<script src="/js/common.js"></script>
	<script src="/js/list.js"></script>
	<script src="/js/auth_util.js"></script>

	<script>
		Vue.component('v-select', VueSelect.VueSelect);
		var agentId = localStorage.getItem('agentId')
		var app = new Vue(merge({
			data: {
				urls: {
					del: '/pc/leave/del'
				},
				showReasonPopup: false,
				selectedAuditReason: '',
				courses: [],
				promoters: []
			},
			created: function () {
				axios.get('/pc/course/all/' + agentId).then(function (res) {
					this.courses = res.data
				}.bind(this));
				axios.get('/pc/staffUser/all/' + agentId).then(function (res) {
					this.promoters = res.data;

				}.bind(this));
				var schoolId = top_params().id;
				if (!schoolId) {
					alert('未知学校');
					throw '未知学校';
				}
				this.schoolId = schoolId;
				this.urls.list = '/pc/leave/list?schoolId=' + schoolId;
				this.getData();
				abled('qingJiaShenPi', this);
			},
			methods: {
				showAuditReason(leave) {
					this.selectedAuditReason = leave.remark || '无审核原因';
					this.showReasonPopup = true;
				},
				closeReasonPopup() {
					this.showReasonPopup = false;
					this.selectedAuditReason = '';
				},
				format: function (leave) {
					return dayjs(leave.startTime).format('YYYY-MM-DD HH:mm') +
						' 至 ' + dayjs(leave.endTime).format('YYYY-MM-DD HH:mm');
				},
				audit: function (id, pass) {
					if (!confirm('确认')) return;
					axios.post('/pc/leave/' + id + '/' + pass).then(function (res) {
						this.getData();
					}.bind(this));
				}
			}
		}));
		["startTime", "endTime"].forEach(function (it) {
			laydate.render({
				elem: "#" + it,
				type: "date",
				done: function (value, date, endDate) {
					app.search[it] = value;
				},
			});
		});
	</script>

</body>

</html>